<template>
	<view class="detail">
		<view class="fixbg" :style="{background: 'url('+ songDetail.al.picUrl +')'}"></view>
		<musicHeader :title="songDetail.name" :icon="true" color="white"></musicHeader>
		<view class="container" v-show="!isShow">
			<scroll-view scroll-y="true">
				<view class="detail-play">
					<image :src="songDetail.al.picUrl" :class="{'detail-play-run': isplayrotate }" mode=""></image>
					<text class="iconfont" :class="playicon" @tap="handleToPlay"></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap"
						:style="{ transform : 'translateY(' +  - (lyricIndex - 1) * 82  + 'rpx)' }">
						<view class="detail-lyric-item" :class="{ active : lyricIndex == index}"
							v-for="(item, index) in songLyric" :key="index">
							{{ item.lyric }}
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="lyric-share" open-type="share">
					分享给微信好友
				</button>
				<!-- #endif -->
				<view class="detail-like">
					<view class="detail-like-title">喜欢这首歌的人也听</view>
					<view class="detail-like-list">
						<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index"
							@tap="handleToSimi(item.id)">
							<view class="detail-like-img">
								<image :src="item.album.picUrl" mode=""></image>
							</view>
							<view class="detail-like-song">
								<view>{{ item.name }}</view>
								<view>
									<image v-if="item.privilege.fee == 1" src="../../static/dujia.png" mode=""></image>
									<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png" mode="">
									</image>
									{{ item.artists[0].name }} - {{ item.name }}
								</view>
							</view>
							<text class="iconfont icon-bofang"></text>
						</view>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-title">精彩评论</view>
					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-head">
								<view class="detail-comment-name">
									<view>{{ item.user.nickname }}</view>
									<view>{{ item.time | formatTime }}</view>
								</view>
								<view class="detail-comment-like">
									{{ item.likedCount | formatCount }}
									<text class="iconfont icon-icon"></text>
								</view>
							</view>
							<view class="detail-comment-text">
								{{ item.content }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musicHeader from '../../components/musicHeader.vue';
	import {
		songDetail,
		songUrl,
		songLyric,
		songSimi,
		songComment
	} from '../../common/api.js';

	export default {
		data() {
			return {
				songDetail: {
					al: {
						picUrl: ''
					}
				},
				songSimi: [],
				songComment: [],
				songLyric: [],
				lyricIndex: 0,
				playicon: 'icon-zanting',
				isplayrotate: true,
				isShow: true
			}
		},
		components: {
			musicHeader
		},
		onLoad(options) {
			this.playMusic(options.songId);
		},
		onUnload() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		onHide() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		methods: {
			playMusic(songId) {
				uni.showLoading({
					title: 'loading...'
				});
				this.$store.commit('NEXT_ID', songId);
				Promise.all([
						songDetail(songId),
						songSimi(songId),
						songComment(songId),
						songLyric(songId),
						songUrl(songId)
					])
					.then((res) => {
						// console.log(res);
						if (res[0].data.code == 200) {
							this.songDetail = res[0].data.songs[0]
						}
						if (res[1].data.code == 200) {
							this.songSimi = res[1].data.songs
						}
						if (res[2].data.code == 200) {
							this.songComment = res[2].data.hotComments
						}
						if (res[3].data.code == 200) {
							let lyric = res[3].data.lrc.lyric;
							let result = [];
							let re = /\[([^\]]+)\]([^[]+)/g;
							lyric.replace(re, ($0, $1, $2) => {
								result.push({
									time: this.formatTimeToSec($1),
									lyric: $2
								});
							});
							this.songLyric = result;
						}
						if (res[4].data.code == 200) {
							// #ifdef MP-WEIXIN
							this.bgAudioMannager = uni.getBackgroundAudioManager();
							this.bgAudioMannager.title = this.songDetail.name;
							// #endif
							// #ifdef H5
							if (!this.bgAudioMannager) {
								this.bgAudioMannager = uni.createInnerAudioContext();
							}
							this.playicon = 'icon-bofang1';
							this.isplayrotate = false;
							// #endif
							this.bgAudioMannager.src = res[4].data.data[0].url || '';
							this.listenLyricIndex();
							this.bgAudioMannager.onPlay(() => {
								this.playicon = 'icon-zanting';
								this.isplayrotate = true;
								this.listenLyricIndex();
							});
							this.bgAudioMannager.onPause(() => {
								this.playicon = 'icon-bofang1';
								this.isplayrotate = false;
								this.cancelLyricIndex();
							});
							this.bgAudioMannager.onEnded(() => {
								this.playMusic(this.$store.state.nextId);
							});
						}
						this.isShow = false
						uni.hideLoading()
					})
			},
			formatTimeToSec(time) {
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			handleToPlay() {
				if (this.bgAudioMannager.paused) {
					this.bgAudioMannager.play();
				} else {
					this.bgAudioMannager.pause()
				}
			},
			// 监听歌词滚动
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for (var i = 0; i < this.songLyric.length; i++) {
						if (this.bgAudioMannager.currentTime > this.songLyric[this.songLyric.length - 1].time) {
							this.lyricIndex = this.songLyric.length - 1;
							break;
						}
						if (this.bgAudioMannager.currentTime > this.songLyric[i].time && this.bgAudioMannager
							.currentTime < this.songLyric[i + 1].time) {
							this.lyricIndex = i;
						}
					}
				})
			},
			cancelLyricIndex() {
				clearInterval(this.timer);
			},
			handleToSimi(songId) {
				this.playMusic(songId);
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/iconfont/iconfont.css';

	.detail-play {
		width: 580rpx;
		height: 580rpx;
		background: url('../../static/disc.png');
		background-size: cover;
		margin: 214rpx auto 0 auto;
		position: relative;

		image {
			width: 370rpx;
			height: 370rpx;
			border-radius: 50%;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			animation: 10s linear move infinite;
			animation-play-state: paused;
		}

		.detail-play-run {
			animation-play-state: running;
		}

		@keyframes move {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		text {
			width: 100rpx;
			height: 100rpx;
			font-size: 100rpx;
			color: white;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		view {
			width: 230rpx;
			height: 360rpx;
			background: url('../../static/needle.png');
			background-size: cover;
			position: absolute;
			left: 100rpx;
			right: 0;
			top: -200rpx;
			margin: auto;
		}
	}

	.detail-lyric {
		height: 246rpx;
		line-height: 82rpx;
		font-size: 32rpx;
		text-align: center;
		color: #949495;
		overflow: hidden;

		.active {
			color: white;
		}

		.detail-lyric-wrap {
			transition: .5s;
		}

		.detail-lyric-item {
			height: 82rpx;
		}
	}
	
	.lyric-share {
		width: 330rpx;
		height: 74rpx;
		margin: 30rpx auto;
		background: transparent;
		border: 1rpx rgba(255, 255, 255, 0.4) solid;
		border-radius: 37rpx;
		color: white;
		text-align: center;
		line-height: 74rpx;
		font-size: 24rpx;
	}

	.detail-like {
		margin: 0 32rpx;

		.detail-like-title {
			font-size: 36rpx;
			color: white;
			margin: 50rpx 0;
		}

		.detail-like-list {

			.detail-like-item {
				display: flex;
				margin-bottom: 38rpx;
				align-items: center;

				.detail-like-img {
					width: 82rpx;
					height: 82rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail-like-song {
					flex: 1;

					view:nth-child(1) {
						color: white;
						font-size: 28rpx;
						// width: 70vw;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						margin-bottom: 12rpx;
					}

					view:nth-child(2) {
						font-size: 22rpx;
						color: #cac9cd;
						// width: 70vw;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;

						image {
							width: 34rpx;
							height: 22rpx;
							margin-right: 10rpx;
						}
					}

				}

				text {
					font-size: 50rpx;
					color: #cac9cd;
				}
			}
		}
	}

	.detail-comment {
		margin: 0 32rpx;

		.detail-comment-title {
			font-size: 36rpx;
			color: white;
			margin: 50rpx 0;
		}

		.detail-comment-item {
			display: flex;
			margin-bottom: 28rpx;

			.detail-comment-img {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 100%;
					height: 100%
				}
			}

			.detail-comment-content {
				flex: 1;
				color: #cac9cd;

				.detail-comment-head {
					display: flex;
					justify-content: space-between;

					.detail-comment-name {

						view:nth-child(1) {
							font-size: 24rpx;
							font-weight: bold;
						}

						view:nth-child(2) {
							margin-top: 2rpx;
							font-size: 19rpx;
						}
					}

					.detail-comment-like {
						font-size: 20rpx;
						font-weight: bold;

						text {
							margin-left: 8rpx;
							font-size: 30rpx;
						}
					}
				}

				.detail-comment-text {
					line-height: 40rpx;
					color: white;
					font-size: 28rpx;
					margin-top: 16rpx;
					border-bottom: 1px rgba(202, 201, 205, 0.3) solid;
					padding-bottom: 40rpx;
				}
			}
		}
	}
</style>